<template>
  <div class="bigboxs">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
        <el-tab-pane label="电流" name="dianliu" ></el-tab-pane>
        <el-tab-pane label="电压" name="dianya"></el-tab-pane>
        <el-tab-pane label="功率" name="gonglv"></el-tab-pane>
        <el-tab-pane label="电度" name="diandu"></el-tab-pane>
      </el-tabs>
    </div>
      <div class="time">
        <el-date-picker
                v-model="valueri"
                size="small"
                type="datetimerange"
                range-separator=""
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <span><button @click="submit">查询</button></span>
    </div>
    <div class="echartt"  ref="yongdian"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {gettagquxianapi} from '@/api/analysis'
export default {
  name: 'CallPoliceHistorytrends',

  data() {
    return {
      valueri:[],
      activeName: 'dianliu',
      dianliutag: ['Ia','Ib', 'Ic'],
      dianyatag: ['Ua', 'Ub', 'Uc'],
      gonglvtag: ['Pa', 'Pb', 'Pc', 'P'],
      diandutag: ['CurkWhRec', 'CurkWhDel','CurkVarhRec',  'CurkVarhDel'],
      timearray: [],
      quuxianlist:[]
    };
  },

  mounted() {
    this. gettime() 

    
  },

  methods: {
    getmethods() {
      this.$nextTick(() => {
      // this.$refs.tabs.$emit('tab-click', { name: 'dianliu' })
      this.$refs.tabs.$el.querySelector(".el-tabs__active-bar").style.width ="30px";
      })
      this.getechartdatalist(this.activeName)
    },
    submit() {
      this.getechartdatalist(this.activeName)
    },
    handleClick(val) {
      this.getechartdatalist(val.name)
    },
    // 接口获取数据
    async getechartdatalist(val) {
      let itemtag=[]
      if (val == 'dianliu') {
        itemtag=this.dianliutag
      } else if (val == 'dianya') {
        itemtag=this.dianyatag
      } else if (val == 'gonglv') {
        itemtag=this.gonglvtag
      } else if (val=='diandu') {
        itemtag=this.diandutag
      }
      const array = []
      for (let i = 0; i < itemtag.length; i++) { 
      const { data: { entity: { itemPoints } } } = await gettagquxianapi({
        deviceId:this.$store.state.monitordataobj.id,
        // deviceId:'887774',
        startTime:this.valueri[0],
        endTime:this.valueri[1],
        periodType:'10',
        itemTag:itemtag[i]
      })
      array.push(itemPoints)
      }
      this.timearray = array[0].map(ele => ele.time)
      let newArray = [];
      for (let i = 0; i < array.length; i++) {
        let innerArray = array[i];
        let tempArray = [];
        for (let j = 0; j < innerArray.length; j++) {
          tempArray.push(innerArray[j].value);
        }
        newArray.push(tempArray);
      }
      this.quuxianlist = newArray
      this.getecharts()
        console.log(this.quuxianlist);
    },
         // 获取当前时间戳
    gettime() {
      this.valueri = []
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
        let hours = date.getHours();
        let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      this.valueri.push(year + '-' + month + '-' + day + ' ' + '00' + ':' + '00' + ':' + '00')
      this.valueri.push(year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds)
    },
    // 获取曲线图
    getecharts() {
      var chartDom = this.$refs.yongdian
      var myChart = echarts.init(chartDom);
      var option;


      option =   {
          backgroundColor: '#fff',
          color: [
            '#f2bd42',
            '#81b337',
            '#e21212',
            'purple'
          ],
          legend: {
            top: '1%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            //  top:'20%',
            left: '7%',
            right: '4%',
            // bottom: '10%',
            // containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                // formatter: '{value}月',
                textStyle: {
                  color: '#333',
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#D9D9D9',
                },
              },
              data: this.timearray,
            },
          ],
          yAxis: [
            {
              min: 'dataMin',
              max:'dataMax',
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#666',
                },
              },
              nameTextStyle: {
                color: '#666',
                fontSize: 12,
                lineHeight: 40,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#E9E9E9',
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: this.activeName=='dianliu'?'A相电流':this.activeName=='dianya'?'A相电压':this.activeName=='gonglv'?'A相有功功率':this.activeName=='diandu'?'正向有功电度':'',
              type: 'line',
              smooth: true,
              // showSymbol: false,/
              symbolSize: 8,
              zlevel: 3,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#fcf2d9',
                      },
                      {
                        offset: 1,
                        color: '#fcf2d9',
                      },
                    ],
                    false,
                  ),
                  shadowColor: '#23CF9C10',
                  shadowBlur: 10,
                },
              },
              data: this.quuxianlist[0],
            },
            {
              name:  this.activeName=='dianliu'?'B相电流':this.activeName=='dianya'?'B相电压':this.activeName=='gonglv'?'B相有功功率':this.activeName=='diandu'?'反向有功电度':'',
              type: 'line',
              smooth: true,
              // showSymbol: false,
              symbolSize: 8,
              zlevel: 3,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#e6f0d7',
                      },
                      {
                        offset: 1,
                        color: '#e6f0d7',
                      },
                    ],
                    false,
                  ),
                  shadowColor: '#578FFB10',
                  shadowBlur: 10,
                },
              },
              data: this.quuxianlist[1],
            },
            {
              name: this.activeName=='dianliu'?'C相电流':this.activeName=='dianya'?'C相电压':this.activeName=='gonglv'?'C相有功功率':this.activeName=='diandu'?'正向无功电度':'',
              type: 'line',
              smooth: true,
              // showSymbol: false,
              symbolSize: 8,
              zlevel: 3,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#f9d0d0',
                      },
                      {
                        offset: 1,
                        color: '#f9d0d0',
                      },
                    ],
                    false,
                  ),
                  shadowColor: '#6E40F210',
                  shadowBlur: 10,
                },
              },
              data: this.quuxianlist[2],
            },
            {
              name: this.activeName=='gonglv'?'总有功功率':this.activeName=='diandu'?'反向无功电度':'',
              type: 'line',
              smooth: true,
              // showSymbol: false,
              symbolSize: 8,
              zlevel: 3,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#d58fd0',
                      },
                      {
                        offset: 1,
                        color: '#fff',
                      },
                    ],
                    false,
                  ),
                  shadowColor: '#FF61E610',
                  shadowBlur: 10,
                },
              },
              data: this.activeName=='gonglv'||this.activeName=='diandu'?this.quuxianlist[3]:[],
            },
          ],
        }


      option && myChart.setOption(option);
      const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
          echarts.getInstanceByDom(entry.target).resize();
        }
      });
        resizeOb.observe(this.$refs.yongdian);
    }
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bigboxs{
  height: 100%;

  .time{
    button{
      width: 60px;
      height: 30px;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #1a90fe;
      color: #fff;
      margin-left: 30px;
    }
  }
  .echartt{
    margin-top: 20px;
    width: 100%;
    height: 90%;
}
}

</style>